<template>
  <div class="waterMark-wrapper" ref="watermark"></div>
</template>

<script>
export default {
  name: 'WaterMark',
  props: {
    contentConf: {
      type: Object,
      default: () => {
        return {
          width: '250px',
          height: '200px',
          textAlign: 'center',
          textBaseline: 'middle',
          font: '18px microsoft yahei',
          fillStyle: 'rgba(184, 184, 184, 0.8)',
          content: {
            text3: 'www-ly-cn',
            text2: 'MiracleYcr',
            text1: '禁止外传'
          },
          rotate: '30',
          zIndex: 1000
        }
      }
    }
  },
  data () {
    return {
      imgData: null, // canvas 生成的水印图片
      observer: null // 监听 DOM 变化的观察对象
    }
  },
  mounted () {
    this.initCanvas();
    this.drawWaterMark();
    this.observerWaterMark();
  },
  methods: {
    initCanvas () {
      const {
        font,
        width,
        height,
        rotate,
        content,
        textAlign,
        fillStyle,
        textBaseline
      } = this.contentConf;
      const canvas = document.createElement('canvas');
      canvas.setAttribute('width', width);
      canvas.setAttribute('height', height);
      const ctx = canvas.getContext('2d');
      ctx.font = font;
      ctx.textAlign = textAlign;
      ctx.fillStyle = fillStyle;
      ctx.textBaseline = textBaseline;
      ctx.rotate(Math.PI / 180 * rotate);
      if (Object.prototype.toString.call(content) === '[object Object]') {
        Object.keys(content).forEach((item, index) => {
          ctx.fillText(
            content[item],
            parseFloat(width) / 2,
            parseFloat(height) / 2 - (index + 1) * 20
          );
        })
      } else {
        ctx.fillText(
          content,
          parseFloat(width) / 2,
          parseFloat(height) / 2
        );
      }
      this.imgData = canvas.toDataURL();
    },
    drawWaterMark () {
      const styleStr = `
                        position:fixed;
                        top:0;
                        left:0;
                        width:100%;
                        height:100%;
                        z-index:${this.contentConf.zIndex};
                        pointer-events: none;
                        background-repeat: repeat;
                        background-image: url('${this.imgData}')
                      `
      this.$refs.watermark.style.cssText = styleStr;
    },
    observerWaterMark () {
      const config = {
        attributes: true,
        childList: true,
        subtree: true
      };
      if (this.observer === null) {
        this.observer = new MutationObserver(this.mutationCallback);
      }
      this.observer.observe(this.$refs.watermark, config); // 监听 watermark DOM 变化
    },
    mutationCallback (mutations) {
      for (const mutation of mutations) {
        const type = mutation.type;
        switch (type) {
          case 'attributes':
            this.observer.disconnect(); // 属性发生变化时触发回调，此时取消监听
            this.drawWaterMark(); // 重新赋值属性
            this.observerWaterMark(); // 然后再度监听
            break;
          default:
            window.alert('修改其他 DOM 结构');
            break;
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.waterMark-wrapper{
  width: 100%;
  height: 100%;
}
</style>
